<template>
  <section class="consultant-service-box">
    <nav class="left-menu">
      <el-menu
        :default-active="activeMenuIndex"
        :collapse="false"
        @select="handleMenuChange"
      >
        <el-menu-item
          v-for="item in menuLis"
          :key="item.value"
          :index="item.value"
          >{{ item.title }}</el-menu-item
        >
      </el-menu>
    </nav>
    <main class="right-content">
      <keep-alive>
        <component :is="comName" :selectedRow="selectedRow"></component>
      </keep-alive>
    </main>
  </section>
</template>

<script>
export default {
  name: "ConsultantService",
  components: {
    ConsultRecord: () => import("./ConsultRecord.vue"),//咨询记录
    PositionAnalysis: () => import("./PositionAnalysis.vue"),//职业定位
    ResumeOptimize: () => import("./ResumeOptimize.vue"),//简历优化
    InterviewTraining: () => import("./InterviewTraining.vue"),//面试辅导
  },
  props: {
    selectedRow: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      activeMenuIndex: "1",
      comName: "ConsultRecord",
      menuLis: [
        { title: "咨询记录", value: "1" },
        { title: "职业定位", value: "2" },
        { title: "简历优化", value: "3" },
        { title: "面试辅导", value: "4" },
      ],
    };
  },
  methods: {
    handleMenuChange(val) {
      this.activeMenuIndex = val;
      switch (val) {
        case "1":
          this.comName = "ConsultRecord";
          break;
        case "2":
          this.comName = "PositionAnalysis";
          break;
        case "3":
          this.comName = "ResumeOptimize";
          break;
        case "4":
          this.comName = "InterviewTraining";
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.consultant-service-box {
  width: 100%;
  display: flex;
  padding-top: 12px;
  .left-menu {
    flex-basis: 145px;
    background: #f0f2f5;
  }
  .right-content {
    flex-grow: 1;
    padding: 0 0px 17px 21px;
  }
}
::v-deep .el-menu {
  width: 145px;
  border-right: 0px;
  background: #f0f2f5;
}

::v-deep .el-menu-item {
  position: relative;
  padding-left: 26px !important;
  padding: 0;
  min-width: 145px;
  height: 41px;
  line-height: 41px;
  color: #8892a6;
  // overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
}

::v-deep .el-menu-item.is-active {
  color: #fff;
  padding-left: 9px !important;
  margin-left: 12px;
  background: #7052ff;
  border-radius: 8px;
  min-width: 133px;
  font-weight: 400;
  &::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 41px;
    background: #7052ff;
    position: absolute;
    left: -12px;
    border-radius: 8px;
    z-index: 100;
  }
}
</style>
